<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: wupy
 * @LastEditTime: 2022-01-07 22:14:21
-->
<template>
  <div ref="right2_container" id="container" style="height: 95%"></div>

</template>

<script>

// 获取请求工具 

import {DualAxes} from '@antv/g2plot';
import {get} from '../../../utils/request'

import {mapState} from 'vuex'
import moment from "moment"


export default {
  data (){
    return{
       dataArr:[]
     }
  },
  created(){

  },
mounted(){
this.initData()
},

  methods:{
  initData(){
    get('/dashboard/pageQueryTodayData',{
      page:1,
      pageSize:5,
      device_id:1
    }).then(res=>{
      res.data.list.forEach(item=>{
      item.dataTime = moment(item.insert_time).format('HH:mm') 
      });
      this.dataArr = res.data.list
      console.log(4444,this.dataArr);
      this.initChart()
    })
    
  },
initChart(){
  const dualAxes = new DualAxes(this.$refs.right2_container,{
    data:[this.dataArr,this.dataArr],
    xField:'dataTime',
    yField:['pm10','pm25'],
    geometryOptions:[{
      geometry:'line',
      color:'#5B8FF9',
    },
    {
      geometry:'line',
      color:'#5AD8A6',
    }
    ]
  })

  dualAxes.render();
}
}
}
</script>

